<script setup lang="ts">
import { ref } from 'vue'
import RefExample from './components/RefExample.vue'
import ReactiveExample from './components/ReactiveExample.vue'
import ComputedExample from './components/ComputedExample.vue'
import WatchExample from './components/WatchExample.vue'
import HomeworkCelsius from './components/HomeworkCelsius.vue'
import HomeworkTodoList from './components/HomeworkTodoList.vue'
import HomeworkMousePosition from './components/HomeworkMousePosition.vue'

const activeExample = ref<string>('ref')

const examples = [
  { id: 'ref', title: '关卡1: ref - 响应式小精灵', component: RefExample },
  { id: 'reactive', title: '关卡2: reactive - 响应式大别墅', component: ReactiveExample },
  { id: 'computed', title: '关卡3: computed - 自动奶茶机', component: ComputedExample },
  { id: 'watch', title: '关卡4: watch & watchEffect - 侦察兵', component: WatchExample },
  { id: 'celsius', title: '作业1: 摄氏↔华氏转换器', component: HomeworkCelsius },
  { id: 'todo', title: '作业2: 待办列表', component: HomeworkTodoList },
  { id: 'mouse', title: '作业3: 鼠标位置追踪', component: HomeworkMousePosition }
]
</script>

<template>
  <div class="app-container">
    <h1>🎮 Vue3 响应式基础闯关游戏 🎮</h1>
    <p>选择下方的关卡开始学习：</p>
    
    <div class="navigation">
      <button 
        v-for="example in examples" 
        :key="example.id"
        @click="activeExample = example.id"
        :class="{ active: activeExample === example.id }"
      >
        {{ example.title }}
      </button>
    </div>
    
    <div class="example-container">
      <component :is="examples.find(e => e.id === activeExample)?.component" />
    </div>
  </div>
</template>

<style scoped>
.app-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 2em 0;
}

.navigation button {
  min-width: 200px;
  white-space: nowrap;
}

.navigation button.active {
  background-color: #646cff;
  color: white;
}

.example-container {
  margin-top: 2em;
}
</style>